<template>
    <div class='box'> 
        <!-- 轮播图 --> 
        <img :src="shopInfo.goodsCoverImg" style="width:100%;height:410px;margin-top:50px" />  
        <!-- 商品信息 -->
        <div class="infos">
          <p class="name">{{shopInfo.goodsName}}</p>
          <p class="adress">免邮费 顺丰快递</p>
          <b class="price">￥{{shopInfo.sellingPrice}}</b>
        </div> 
        <div class="li">
          <span>概述</span>
          <span>参数</span>
          <span>安装服务</span>
          <span style="border:none">常见问题</span>
        </div>
        <!-- 底部动作栏 -->
        <van-action-bar>
          <van-action-bar-icon icon="chat-o" text="客服" />
          <van-action-bar-icon icon="shopping-cart-o" text="购物车" :badge="store.state.cart.length" @click="goCart" />
          <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="addCart"/>
          <van-action-bar-button color="#7232dd" type="danger" text="立即购买" />
        </van-action-bar>
        <!-- 顶部搜索框 -->
        <div class="top">
            <b class="left" @click="goHome">
                <van-icon name="arrow-left"/>
            </b> 
            <div class="search">
                商品详情
            </div>
            <div class="right"><van-icon name="weapp-nav" /></div>
        </div>  
    </div>
</template>

<script>
import { useStore } from "vuex";
import { Toast, ActionBar, ActionBarIcon, ActionBarButton } from "vant";
// 导入api
import api from "../http/api.js";
import { ref, reactive, computed, toRefs, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    // 获取vuex
    const store = useStore();
    // 获取路由信息
    const route = useRoute();
    // shopInfo
    const shopInfo = reactive({
      goodsCarouselList: []
    });
    const cartlist = reactive(store.state.cart);
    // 点击加入购物车
    const addCart = async () => {
      // 封装数据
      let obj = {
        goodsCount: 1,
        goodsId: shopInfo.goodsId
      };
      let res = await api.addCart(obj);
      console.log(res, "加入购物车");
      if (res.status == 200) {
        // 提示加入成功
        Toast.success("加入成功");
      }
    };
    // 去购物车页面
    const goCart = () => {
      //   将active值重置
      store.commit("setTab", { act: 2, isShow: true });
      location.href = "/#/cart";
    };
    // 请求接口获取商品详情数据
    const goodsInfo = id => {
      api.setDetail(id).then(res => {
        // console.log(res.data.resultCode, "获取商品详情数据");
        if (res.data.resultCode == "200") {
          console.log(res.data.data, "1");
          for (const key in res.data.data) {
            shopInfo[key] = res.data.data[key];
          }
        }
      });
    };
    // 返回首页
    const goHome = () => {
      store.commit("setTab", { act: 0, isShow: true });
      location.href = "/#/home";
    };
    onMounted(() => {
      // console.log(route.params.id);
      goodsInfo(route.params.id);
    });
    return {
      store,
      route,
      shopInfo,
      goodsInfo,
      goHome,
      goCart,
      cartlist,
      addCart
    };
  }
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  font-size: 28px;
  .top {
    width: 100%;
    height: 100px;
    background: #fff;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 28px;
    .search {
      width: 80%;
      box-sizing: border-box;
      padding: 15px 0;
      height: 70px;
      text-align: center;
    }
  }
  .infos {
    width: 100%;
    text-align: left;
    padding: 0 10px;
    .name {
      font-size: 35px;
    }
    .adress {
      color: #999;
      margin: 15px 0;
    }
    .price {
      font-weight: 500;
      color: #ff0000;
      font-size: 40px;
    }
  }
  .li {
    margin-top: 20px;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    span {
      width: 25%;
      height: 60px;
      line-height: 60px;
      box-sizing: border-box;
      border-right: 1px solid #999;
    }
  }
  van-action-bar {
    width: 100%;
    background: plum;
    position: fixed;
    bottom: 0;
  }
}
</style>
